<template>
	<m-layout2 title="分类详情" class="box " :isShow="false">
		<m-search slot="header" placeholderText='请输入商品名称' lIconColor="#111" class="header" :sButton="false" />
		<view class="content">
			<view class="left">
				<silder :idx="isIdx">
					<template v-for="(item,idx) in oneList">
						<text :class="{active:idx==isIdx}" @click="tapIdx(item.id,item.tname,idx)">{{item.tname}}</text>
					</template>
				</silder>
			</view>
			<view class="right">
				<template >
					<!-- <image class="banner-img" lazy-load="" src="../../../static/images/test/swiper1.png" mode="aspectFill"  @click="JumpUrl(second['redirectionUrl'],2)"/> -->
				</template>
				<template>
					<view class="card-main">
						<!-- <image src="../../../static/images/test/fenlei1.png" mode=""></image>
						<image src="../../../static/images/test/fenlei2.png" mode=""></image> -->
						<!-- <template v-for="(item,idx) in twoList">
							<view @click="goDetails(item)">
								<view class="image-box">
									<image :src="item.picurl" mode=""></image>
								</view>
								<text>{{item.tname}}</text>
							</view>
						</template> -->
					</view>
				</template>
			</view>
		</view>
	</m-layout2>
</template>

<!--
  scrollTo.behavior  表示滚动行为
  smooth (平滑滚动)，instant (瞬间滚动)，默认值 auto，效果等同于 instant
 -->
<script>
	// import { GetGoodsTypePage } from '@/api/Goods.js'
	import silder from './components/silder.vue'
	import Item from './components/item.vue'
	export default {
		components: {
			silder,
			Item
		},
		data() {
			return {
				typeId:'',
				type: '',
				//当前分类的数据
				tList: [
					
				],
				secondIdx: 0,
				isIdx: 0,
				pid: 0,
				tName: '', // 一级分类名称
				oneList: [
					{
						id:1,
						tname:'精选'
					},
					     
					{
						id:2,
						tname:'绿茶'
					},
					{
						id:3,
						tname:'红茶'
					},
					{
						id:4,
						tname:'白茶'
					},
					{
						id:5,
						tname:'黄茶'
					},
					{
						id:6,
						tname:'黑茶'
					},
					{
						id:7,
						tname:'青茶'
					},
				], // 一级分类列表
				twoList: [ ], // 二级分类列表
			}
		},
		computed: {
			second() {
				try {
					return {
						categoryPictureList: [],
						...this.tList[this.isIdx]
					}
				} catch (e) {

					//TODO handle the exception
				}
			},
		},
		onLoad({ type,typeId }) {
			this.type = type;
			this.typeId = typeId;
			// this.getData(this.pid);
		},
		watch: {
			//切换分类
			isIdx() {
				this.secondIdx = 0;
			},
		},
		methods: {
			goDetails(item) {
				const url = '/pages/home/goodsList/goodsList'
				this.Jump(url + '?oneId=' +item.pid + '&twoId=' + item.id + '&tName=' + this.tName)
			},
			//点击banner时
			handleBanner(item) {
				let  reg = new RegExp('http')
				if (item.redirectionUrl ) {
					if(reg.test(item.redirectionUrl)){
						window.open(item.redirectionUrl)
					}else{
						this.Jump(item.redirectionUrl)
					}
				}
			},
			async getData(pid) {
				// console.log(pid);
				const params = {
					pid: pid,
					pageSize: 1000
				}
				const  res = await GetGoodsTypePage(params);
				const { success,list } = res;
				console.log(list);
				if(pid == 0){
					this.oneList = list;
					// setTimeout(()=>{
					// 	this.tName = this.oneList[0].tname;
					// 	this.getData(this.oneList[0].id)
					// },200)
					
				}else{
					this.twoList = list;
				}
			},
			//点击时左侧分类时
			tapIdx(id,tname,index) {
				console.log('当前分类ID$下标======>', index)
				this.isIdx = index;
				this.tName = tname;
				this.pid = id;
				this.getData(this.pid);
			},

		},
	};
</script>
<style lang='scss' scoped>
	.header {
		::v-deep .search-Item {
			background: #F5F5F5;
		}
	}

	.box {
		.content {
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}

		.left {
			width: 180rpx;
			height: 100%;
			background: #F3F3F3;

			&>view {
				width: 100%;
				height: 100%;
				overflow-y: scroll;
			}

			text {
				position: relative;
				display: block;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;
				text-align: center;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #002D54;

				&::after {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 0rpx;
					border-radius: 3rpx;
					transition: all .15s;
				}
			}

			.active {
				background: #FFFFFF;
				font-weight: bold;

				&::after {
					height: 42rpx;
					background: #0781C8;
				}

			}
		}

		.right {
			flex: 1;
			padding: 0 24rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			overflow-y: scroll;
			.banner-img {
				width: 100%;
				height: 180rpx;
			}
			.swiper {	
				height: 180rpx;

				::v-deep.uni-swiper-wrapper {
					overflow: hidden;
				}

				.swiper-item {
					height: 180rpx;

					.banner-img {
						width: 100%;
						height: 180rpx;
					}
				}

				::v-deep {
					.uni-swiper-dot {
						width: 10rpx;
						height: 10rpx;
						background: #f6f6f6 !important;
						border-radius: 5rpx;

						&.uni-swiper-dot-active {
							width: 20rpx;
						}
					}
				}
			}

			.card-main {
				position: relative;
				z-index: 1;
				padding: 30rpx 0;
				image{
					width: 100%;
					height: 416rpx;
					margin-bottom: 20rpx;
				}

			/* 	display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-gap: 20rpx; */

				&>view {
					text-align: center;

					.image-box {
						width: 156rpx;
						height: 156rpx;
						background: #FAFAFA;
						border-radius: 10rpx;
						overflow: hidden;
						padding: 19rpx;
						box-sizing: border-box;

						image {
							width: 100%;
							height: 100%;
						}
					}

					text {
						padding-top: 12rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}
			}

		}
	}
</style>
